import { defineComponent, onMounted, reactive, ref } from "vue";
import styles from "./Tabs.module.scss";
import _ from "lodash";
export default defineComponent({
  props: ['list'],
  setup(props: any) {
    // 被激活项
    const actived = ref(0);
    // 激活项变更
    const activedChange = (idx: number) => {
      contsRef.value[idx].value.scrollIntoView({
        block: 'start',
        behavior: 'smooth',
      })
    }
    // 滚动视图子节点ref绑定
    const contsRef = ref([] as any[]);
    props.list.forEach(() => {
      contsRef.value.push(ref(null));
    })
    // 滚动监听
    onMounted(() => {
      document.querySelector("#scroll")?.addEventListener('scroll', (e) => {
        contsRef.value.forEach((item: any, index: number) => {
          if (item.value.getBoundingClientRect().top < 100 && item.value.getBoundingClientRect().top > -100) {
            actived.value = index;
          }
        })
      })
    })
    return () => (
      <>
        <div class={styles['tabs-header']}>
          {
            props.list.map((item: any, index: number) => (
              <div class={[styles['tabs-header-item'], index === actived.value && styles.actived]} onClick={() => { activedChange(index) }}>
                {item.name}
              </div>
            ))
          }
        </div>
        {
          props.list.map((item: any, index: number) => (
            <div ref={contsRef.value[index]}>
              {item.el?.()}
            </div>
          ))
        }
      </>
    )
  }
})